<template>
  <t-tabs
    v-model="activeTab"
    placement="left"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <t-tab-panel
      v-for="(item, index) in tabs"
      :key="index"
      :value="item.value"
      :label="item.label"
    >
      <!-- 可选：每个 Tab 内容插槽 -->
      <slot :name="item.value">{{ item.content }}</slot>
    </t-tab-panel>
  </t-tabs>
</template>

<script setup>
import { ref } from 'vue'
import { Tabs, TabPanel } from 'tdesign-vue-next'

defineProps({
  /** 导航项数组 [{ label, value, content }] */
  tabs: {
    type: Array,
    required: true,
    default: () => [],
  },
  /** 宽度 */
  width: {
    type: Number,
    default: 200,
  },
  /** 高度 */
  height: {
    type: Number,
    default: 400,
  },
  /** 默认激活的 Tab */
  defaultValue: {
    type: String,
    default: '',
  },
})

const activeTab = ref(defaultValue || (tabs[0]?.value ?? ''))
</script>

<style scoped>
/* 可选样式，根据你的截图可自定义 */
.t-tabs__nav {
  background-color: #f5f5f5;
}
.t-tabs__nav-item {
  padding: 8px 16px;
}
</style>
